<template>
	<view>
		<view class="iconbox w100 flex flex_ac flex_jc">
			<view class="bg_img">
				<image :src="icon"></image>
			</view>
			<view class="icon">
				<button open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
					<u-image width="150rpx" height="150rpx" :src="icon" ></u-image>
				</button>
				<!-- <image :src="icon"></image> -->
				
				<view class="fz25 mt10 tips">点击更换头像</view>
			</view>
		</view>
		
		
		<view class="u-page">
			<view class="u-demo-block">
				<view class="u-demo-block__content">
					<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
					<u--form
						labelPosition="left"
					>
						<u-form-item
							label="昵称"
							borderBottom
						>
							<u--input
								v-model="name"
								border="none"
								placeholder="请输入昵称"
							></u--input>
						</u-form-item>
						
						<u-form-item
							label="签名"
							borderBottom
						>
							<u--input
								v-model="signature"
								border="none"
								placeholder="请输入签名,让别人更好认识你"
							></u--input>
						</u-form-item>
						
						<u-form-item
							label="性别"
							prop="userInfo.sex"
							borderBottom
							@click="showSex = true; hideKeyboard()"
						>
							<u--input
								v-model="sex"
								disabled
								disabledColor="#ffffff"
								placeholder="请选择性别"
								border="none"
							></u--input>
						
						</u-form-item>
					</u--form>	
				
					<u-action-sheet
						:show="showSex"
						:actions="actions"
						title="请选择性别"
						@close="showSex = false"
						@select="sexSelect"
					>
					</u-action-sheet>
				</view>
			</view>
		</view>
		<view class="w100 flex flex_jc">
			<view @click="submit()" class="btn">保存</view>
		</view>	
		
	</view>
</template>

<script>
	import {edit} from "@/api/api"
	export default {
		data() {
			return {
				icon:'',
				userinfo:[],
				fileList1: [],
				showCalendar: false,
				showBirthday: false,
				name:'',
				sex:'',
				signature:'',
				sextype:0,
				showSex: false,
				actions: [{
						type:1,
						name: '男',
					},
					{
						name: '女',
						type:2,
					},
					{
						name: '保密',
						type:3,
					},
				],
				uploadImgUrl:'https://box.jiezhui.top/wxapp/upload/uploadImg.html',
			}
		},
		
		
		onLoad: function (option) {
				  
		},
		onShow:function(){
			this.userinfo = uni.getStorageSync('userinfo')?uni.getStorageSync('userinfo'):[],
			this.icon = this.userinfo.avatar
			this.name = this.userinfo.nickname
			this.signature = this.userinfo.signature
			this.sextype = this.userinfo.sex
			if(this.sextype==1){
				this.sex = '男'
			}else if(this.sextype==2){
				this.sex = '女'
			}else if(this.sextype==3){
				this.sex = '保密'
			}
	
		},
		
		onPullDownRefresh() {
		},
	
	
	
	
		methods:{
			
			onChooseAvatar(e) {
				console.log(e)
				this.uploadFilePromise(e.detail.avatarUrl)
			},
		
			
			submit(){
				if(this.name==''){
					this.msg('请输入名字')
				}
				var data = {
					avatar:this.icon,
					sex:this.sextype,
					nickname:this.name,
					signature:this.signature
				}
				edit(data).then(res=>{
					if(res.code==0){
						this.msg(res.msg)
						this.userinfo.nickname = this.name
						this.userinfo.avatar = this.icon
						this.userinfo.sex = this.sextype
						this.userinfo.signature =this.signature
						uni.setStorageSync('userinfo',this.userinfo)
						setTimeout(function(){
							 uni.navigateBack({//返回
							       delta: 1
							     })
						},2000)
					}else{
						this.msg(res.msg)
					}
				})
				
			},
			
			msg(msg){
				uni.showToast({
					title: msg,
					icon:'none'
				});
			},
			
			sexSelect(e){
				this.sex = e.name
				this.sextype = e.type
				console.log(e)
			} ,
			
			hideKeyboard() {
				uni.hideKeyboard()
			},
		
			uploadFilePromise(url) {
				var that = this
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: that.uploadImgUrl, // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						success: (res) => {
							setTimeout(() => {
								that.icon = res.data
								resolve(res.data.data)
							}, 1000)
						}
					});
				})
			},
		}
		
	}
</script>
<style>
	.u-upload__button{width: 150rpx!important;height: 150rpx!important;margin: 0!important;}
	.u-upload{border-radius: 30rpx;overflow: hidden;}
	.u-upload__wrap__preview{display: none!important;}
	.u-transition{position: absolute;left: 0;top: 0;border-radius: 30rpx;overflow: hidden;}
</style>
<style scoped>
	.bg_img image{width: 100%;height: 100%;}
	.bg_img{
		height: 450rpx;width: 100%;background-repeat: no-repeat;background-position: center;background-size: cover;-webkit-filter: blur(10px);-moz-filter: blur(10px);
		-o-filter: blur(10px);-ms-filter: blur(10px);filter: blur(10px);z-index: 1;position: absolute;top: 0;left: 0;}
	
	.tips{color: #FFFFFF;}
	.icon button{width: 150rpx;height: 150rpx;border-radius: 100%;overflow: hidden;}
	.icon image{width: 150rpx;height: 150rpx;position: absolute;left: 0;top: 0;border-radius: 30rpx;overflow: hidden;}
	.icon{position: relative;z-index: 2;}
	.iconbox{height: 450rpx;position: relative;}
	.btn{width: 600rpx;height: 80rpx;background: #0066ff;margin-top: 50rpx;
	line-height: 80rpx;text-align: center;border-radius: 100rpx;
	color: #ffffff;font-size: 35rpx;font-weight: bold;letter-spacing: 10rpx;
	}
	
	button::after{
	 	border: none;
	}
	button{
		position: relative;
		display: block;
		margin-left: 0;
		margin-right: 0;
		padding-left: 0px;
		padding-right: 0px;
		box-sizing: border-box;
		/* // font-size: 18px; */
		text-align: center;
		text-decoration: none;
		// line-height: 1;
		line-height: 1.35;
		/* // border-radius: 5px; */
		-webkit-tap-highlight-color: transparent;
		overflow: hidden;
		color: #000000;
		background-color: #fff;
		width: 100%;
		height: 100%;
		}
	
</style>